<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

	<head th:include="include :: header">
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="/css/phone/person_info.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1)" class="mui-icon  mui-pull-left">
				<span style="font-size: 15px">返回</span>
			</a>
			<h1 class="mui-title">个人中心</h1>
		</header>
		<form class="stylin_form1"  th:action="'/iphone/commitPersonInfo/'+${userinfo.userId}" method="post" onsubmit="return verifyPhone()">

			<fieldset>

				<legend><span>基本信息</span></legend>
				<!--昵称-->
				<section>
					<!-- for属性把标注与控件关联起来，它的值必须与控件ID值相同 -->
					<label for="user_name">昵称<span> *</span></label>
					<!-- text属性让这个控件可以输入文本 -->
					<input type="text" id="user_name" name="username" readonly="readonly" th:value="${userinfo.nickName}" />

				</section>
				<!--签名-->
				<section>
					<!-- for属性把标注与控件关联起来，它的值必须与控件ID值相同 -->
					<label for="motto">签名<span> *</span></label>
					<!-- text属性让这个控件可以输入文本 -->
					<input type="text" id="motto" name="motto" th:value="${userinfo.motto}"/>

				</section>
				<!--性别-->
				<section>
					<h4>性别</h4>
					<section>
						<input checked="checked" id="radio1" name="sex" type="radio" value="1" th:checked="${userinfo.sex==1}"/>
						<label for="radio1">男</label>
					</section>
					<section>
						<input id="radio2" name="sex" type="radio" value="0" th:checked="${userinfo.sex==0}"/>
						<label for="radio2">女</label>
					</section>
					<section>
						<input id="radio3" name="sex" type="radio" value="2" th:checked="${userinfo.sex==2}"/>
						<label for="radio3">保密</label>
					</section>
				</section>
				<!--生日-->
				<section>
					<label for="birth" th:text="生日"></label>
					<input type="date" id="birth" name="birth" min="1918-1-1" th:value="${#dates.format(userinfo.birthday,'yyyy-MM-dd')}" />
				</section>
				<!--所在地-->
				<section>
					<!-- for属性把标注与控件关联起来，它的值必须与控件ID值相同 -->
					<!--省份选择-->
					<select id="prov" name="province" onchange="showCity(this)">
						<option>省份</option>
					</select>
					<!--城市选择-->
					<select id="city" name="city" onchange="showCountry(this)">
						<option>城市</option>
					</select>
					<!--县区选择-->
					<select id="country" name="district" >
						<option>县区</option>
					</select>
				</section>
				<section>
					<!--详细信息-->
					<label for="address">详细信息</label>
					<textarea id="address" name="address" rows="3" th:text="${userinfo.address}"></textarea>
				</section>
				<!--手机号-->
				<section>
					<label for="mobile">手机号</label>
					<input type="tel" id="mobile" name="phone" th:value="${userinfo.phone}"/>
					<span id="mobileWarning" style="font-size: 12px;color: red"></span>
				</section>
				<!--职业-->
				<section>
					<label for="select_choice">选择你的职业</label>
					<select id="select_choice" name="deptId">
						<option th:each="dept:${industryDOS}" th:value="${dept.industryId}" th:text="${dept.industryName}"
								th:attr="selected=${dept.industryId==userinfo.industryId}">Choice 1</option>
					</select>
				</section>
				<!--个人描述-->
				<section>
					<label for="description">个人描述</label>
					<textarea id="description" name="description" th:text="${userinfo.personalDescription}"></textarea>
				</section>
				<!--提交按钮-->
				<section>
					<input type="submit" value="提交" />
				</section>
			</fieldset>
		</form>
	<script type="text/javascript" src="/js/phone/person_info.js" ></script>
	</body>
<script>
//	手机号校验
	function verifyPhone() {
		var phone=document.getElementById("mobile").value;
		var re=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g;//手机号码的正则验证
		if (re.test(phone)){
            document.getElementById("mobileWarning").innerText="";
            return true;
		}else {
		    gre=/^(0\\d{2}-\\d{8}(-\\d{1,4})?)|(0\\d{3}-\\d{7,8}(-\\d{1,4})?)$/;
		    if (gre.test(phone)){
                document.getElementById("mobileWarning").innerText="";
                return true;
			}
            document.getElementById("mobileWarning").innerText="输入手机号格式有误";
            return false;
		}


    }
</script>
</html>